<template>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"  v-for='(item,index) in img' :key="index">
            <img :src="item.address">    
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
    
</div>
</template>

<script>
import axios from 'axios';
import Swiper from 'swiper';
import 'swiper/css/swiper.css';
export default {
  name: "lunbo",
  data(){
        return {
             img:[]
             }
    },
 // 数据挂载后dom渲染时
    created(){
//  商品类型
      axios.post("http://x3e7eb.natappfree.cc/goods/findPhotoByType?type=1")
      .then(res=>{
          this.img=res.data.data.slice(0,2)
          // 什么时候使用$nextTick：如果要使用“由数据更新后引起的新的dom”。
            this.$nextTick(()=>{
                new Swiper ('.swiper-container', {
                        direction: 'vertical', // 垂直切换选项
                        loop: true, // 循环模式选项  
                        autoplay:true,
                        speed:1000,
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    
                    // // 如果需要前进后退按钮
                    navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                    },
                })       

            })

      });
  }

};
</script>

<style scoped>
.swiper-container{width: 375px;height: 200px;background-color: aquamarine;}
.swiper-wrapper{width: 100%;height: 100%;}
.swiper-slide{width: 100%;height: 100%;}
.swiper-wrapper img{width:100%;height:100%;}
</style>